<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>04_VueComponent</title>
</head>
<body>
    
    <!-- 
            关于VueComponent:
                1.school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。
                
                2.我们只需要写 <school/> 或 <school></school>，Vue解析时会帮我们创建 school 组件的实例对象。
                  即Vue帮我们执行的： new VueComponent(options)。
                
                3.特别注意：每次调用 Vue.extend，返回的都是一个全新的VueComponent！！！

                4.关于this指向：
                    (1).组件配置中：
                        data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
                    (2).new Vue(options)配置中：
                        data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
                
                5.VueComponent的实例对象，以后简称为 vc （也可称之为：组件实例对象）。
                  Vue的实例对象，以后简称为 vm。
     -->


    <!-- 容器 -->
    <div id="root">
        <hello></hello>
        <school></school>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

       // 1.定义组件
       const school = Vue.extend({
           template:`
            <div>
                <h1>学校：{{name}}</h1>
                <button @click='getSchoolName'>点击获取学校信息</button>    
            </div>
           `,
           data(){
            return{
                name:'北京大学',
            }
           },
           methods:{
            getSchoolName(){
                console.log('组件this指向@',this);
                // 组件中的this指向VueComponent实例
                alert(this.name)
            }
           }
       })

       // 
       const hello = Vue.extend({
            template:`<h1>{{msg}}</h1>`,
            data(){
                return {
                    msg:'欢迎来到北大学习',
                }
            }
       })

       // 控制台输出的是 f VueComponent(options)构造函数
       // 在构造函数中标记调用是输出，当使用组件 school、 hello 时，控制台会输出两次，证明每次调用Vue.extend，返回的都是全新的 VueComponent
       console.log('@vc',school);
       
        const vm=  new Vue({
            el:'#root',
            data:{
                
            },
            // 注册组件（局部）
            components:{
                school,
                hello,
            }
        })

        console.log('@vm',vm);
 
       
    </script>
</body>
</html>